<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外卖 | 美团网</title>
  <link rel="icon" href="./imgs/favicon.ico" sizes="16x16 32x32">
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_2766798_c4r3kojfy39.css">
  <link rel="stylesheet" href="./css/carts.css">
</head>

<body>
  <!-- header -->
  <script src="./js/commom-header.js"></script>
  <!-- header -->

  <!-- main -->
  <div id="app">
    <div class="bd">
      <form>
        <table>
          <tbody>
            <tr>
              <th class="desc">项目</th>
              <th class="unit-price">单价</th>
              <th class="num">数量</th>
              <th class="total-price">总价</th>
            </tr>
            <tr>
              <td class="title">
                <a href="" data-reactid="12">福口居: 福口居10人餐</a>
                <p>不麻不辣</p>
              </td>
              <td>¥1028</td>
              <td data-reactid="16">
                <div class="input-number">
                  <button class="minus-btn" type="button">-</button>
                  <input type="text" class="input" value="16">
                  <button class="plus-btn" type="button">+</button>
                </div>
              </td>
              <td data-reactid="21">¥1648</td>
            </tr>
          </tbody>
        </table>
        <div class="row discount"></div>
        <div class="row price">
          <span class="total-price">
            应付金额：<span><i>¥</i><b>1648</b></span>
          </span>
        </div>
        <div class="form-submit">
          <input type="button" class="btn" value="提交订单" onclick="location.href='./pay.html' ">
        </div>
      </form>
    </div>
  </div>
  <!-- main -->

  <!-- footer -->
  <footer class="com-footer">
    <div class="footer-content">
      <div class="footer-link clearfix">
        <div class="footer-column">
          <dl>
            <dt>用户帮助</dt>
            <dd><a rel="nofollow" href="http://www.meituan.com/help/selfservice" >申请退款</a>
            </dd>
            <dd><a rel="nofollow" href="http://www.meituan.com/help/faq" >常见问题</a></dd>
            <dd><a rel="nofollow" href="https://rules-center.meituan.com/rules-detail/4" >用户协议</a></dd>
            <dd><a rel="nofollow" href="https://rules-center.meituan.com/rules-detail/2" >隐私政策</a></dd>
            <dd><a rel="nofollow" href="http://www.meituan.com/about/anticheat" >反诈骗公告</a>
            </dd>
            <dd><a rel="nofollow" href="https://rules-center.meituan.com/customer-rights" >消费者权益保障</a>
            </dd>
          </dl>
          <dl>
            <dt>美团服务</dt>
            <dd><a href="http://waimai.meituan.com/" >美团外卖</a></dd>
            <dd><a href="http://hotel.meituan.com/" >美团酒店</a></dd>
            <dd><a href="http://maoyan.com/" >猫眼电影</a></dd>
            <dd><a href="https://peisong.meituan.com/" >美团配送</a></dd>
            <dd><a href="https://www.mtyun.com/" >美团云</a></dd>
            <dd><a href="http://www.dianping.com/" >大众点评</a></dd>
            <dd><a href="https://minsu.meituan.com/" >美团民宿</a></dd>
            <dd><a href="https://mad.meituan.com" >无人配送</a></dd>
            <dd><a href="https://em.meituan.com/#/" >企业用餐、企业差旅</a></dd>
          </dl>
        </div>
        <div class="footer-column">
          <dl>
            <dt>商家合作</dt>
            <dd><a rel="nofollow" href="https://ecom.meituan.com/bizsettle/settle?utm_source=mt_C_my"
                >美食商家入驻(非外卖)</a></dd>
            <dd><a href="https://kd.meituan.com/" >美团外卖开店申请</a></dd>
            <dd><a href="https://rms.meituan.com" >美团餐饮系统</a></dd>
            <dd><a rel="nofollow" href="http://page.peisong.meituan.com/apply/join" >美团配送合作申请</a></dd>
            <dd><a href="https://xue.meituan.com/?from=mtpc" >美团餐饮培训</a></dd>
            <dd><a rel="nofollow" href="https://ruzhu.meituan.com/settle/hotel/propaganda.html"
                >酒店商家入驻</a></dd>
            <dd><a rel="nofollow" href="https://ruzhu.meituan.com/settle/trip/pc.html" >境内度假商家入驻</a></dd>
            <dd><a rel="nofollow" href="https://e.dianping.com/claimcpc/page/index?source=mt" >综合商家入驻</a>
            </dd>
            <dd><a rel="nofollow" href="https://minsu.meituan.com/about/" >美团民宿房东商家入驻</a>
            </dd>
            <dd><a href="http://pc.meituan.com/?activity_code=mtpcdb" >商家开票申请</a></dd>
            <dd><a rel="nofollow" href="https://h5.youzan.com/v2/feature/nALm22bkFF?dc_ps=2039811416638097413.200001"
                >美团智能收银机</a></dd>
            <dd><a rel="nofollow" href="https://developer.meituan.com/?from=mtpcsw" >美团开放平台</a></dd>
            <dd><a rel="nofollow" href="https://recommend-zc.meituan.com/opportunity?channel=1" >美团收单</a>
            </dd>
            <dd><a rel="nofollow" href="https://paidui.meituan.com/?activity_code=167_00038050"
                >免费使用美团排队</a></dd>
            <dd><a rel="nofollow" href="https://i.meituan.com/awp/hfe/block/6c4bec785dce/11188/index.html"
                >快驴进货商家合作</a></dd>
            <dd><a rel="nofollow" href="https://shangou.meituan.com/joinin" >美团闪购商家入驻</a>
            </dd>
            <dd><a rel="nofollow" href="https://123.meituan.com?source=mtwpc" >合作/招聘</a></dd>
          </dl>
        </div>
        <div class="footer-column">
          <dl>
            <dt>合作商招募</dt>
            <dd><a rel="nofollow" href="https://mfe.waimai.meituan.com/mfepro/client-h5/#/login"
                >美团外卖合作商招募</a></dd>
            <dd><a rel="nofollow" href="https://daili.meituan.com/?comeFrom=mtwebBusinesscoopd"
                >到店餐饮合作商招募</a></dd>
            <dd><a rel="nofollow" href="https://daili.meituan.com/dz-zhaoshang" >到店综合业务合作商招募</a></dd>
            <dd><a rel="nofollow" href="http://union.meituan.com/" >美团联盟</a></dd>
            <dd><a rel="nofollow" href="https://wenjuan.meituan.com/survey/4332711" >美团收银招募线上分销商</a></dd>
            <dd><a rel="nofollow" href="https://agent.meituan.com/zhaoshang?partnerSource=3"
                >美团收银合作商招募</a></dd>
            <dd><a rel="nofollow" href="https://zf.meituan.com?partnerSource=3" >美团收单合作商招募</a></dd>
            <dd><a rel="nofollow"
                href="https://i.meituan.com/awp/hfe/block/index.html?cube_h=2b7f0b4afbea&amp;cube_i=97656"
                >美团充电宝合作商招募</a></dd>
          </dl>
          <dl>
            <dt>美团规则</dt>
            <dd><a rel="nofollow" href="https://rules-center.meituan.com/" >规则中心</a></dd>
            <dd><a rel="nofollow" href="https://rules-center.meituan.com/rules" >规则目录</a>
            </dd>
            <dd><a rel="nofollow" href="https://rules-center.meituan.com/advices" >规则评议院</a>
            </dd>
          </dl>
        </div>
        <div class="footer-column">
          <dl>
            <dt>关注美团</dt>
            <dd><a rel="nofollow" href="http://weibo.com/meituan" >美团新浪微博</a></dd>
          </dl>
          <dl>
            <dt>公司信息</dt>
            <dd><a rel="nofollow" href="https://about.meituan.com/" >关于我们</a></dd>
            <dd><a rel="nofollow" href="https://about.meituan.com/investor.html" >投资者关系</a>
            </dd>
            <dd><a rel="nofollow" href="http://zhaopin.meituan.com/" >加入我们</a></dd>
            <dd><a rel="nofollow" href="https://dpapp-appeal.meituan.com/#/shopCreditRegulationPC"
                >商户诚信公约及管理办法</a></dd>
            <dd><a rel="nofollow" href="https://i.meituan.com/awp/ffe/insurance-website/index.html#/"
                >保险经纪资质</a></dd>
          </dl>
          <dl>
            <dt>廉正举报</dt>
            <dd><a rel="nofollow" href="https://jubao.meituan.com/app/home?source=1" target="_self">廉正举报平台</a></dd>
          </dl>
          <dl>
            <dt>知识产权</dt>
            <dd><a rel="nofollow" href="https://ipr.meituan.com?source=1" >知识产权维权平台</a></dd>
          </dl>
        </div>
        <div class="footer-column">
          <dl>
            <dt>消费者服务热线</dt>
            <dd>外卖消费者：<a rel="nofollow" href="tel:10109777" >10109777</a></dd>
            <dd>猫眼消费者：<a rel="nofollow" href="tel:10105335" >10105335</a></dd>
            <dd>其他消费者：<a rel="nofollow" href="tel:10107888" >10107888</a></dd>
          </dl>
          <dl>
            <dt>商家服务热线</dt>
            <dd>外卖&amp;餐饮商家：<a rel="nofollow" href="tel:10105557" >10105557</a></dd>
            <dd>休闲娱乐、丽人、ktv、教育、结婚、亲子、家装等商家：<a rel="nofollow" href="tel:10100107" >10100107</a></dd>
          </dl>
          <dl>
            <dt>投诉举报专区</dt>
            <dd>违法和不良信息举报电话：<a rel="nofollow" href="tel:4006018900" >4006018900</a></dd>
            <dd>举报邮箱：<a rel="nofollow" href="mailto:tousujubao@meituan.com" target="_self">tousujubao@meituan.com</a>
            </dd>
            <dd><a rel="nofollow" href="https://www.12377.cn/" >网上有害信息举报</a></dd>
            <dd>注：<a rel="nofollow" href="" target="">以上渠道均可投诉举报涉未成年人的违法和不良信息</a></dd>
          </dl>
          <dl>
            <dt><a rel="nofollow" href="https://ecom.meituan.com/bizsettle/settle/merchantsSettle"
                >商家自助入驻美团入口</a></dt>
          </dl>
          <dl>
            <dt><a rel="nofollow" href="https://isp.meituan.com/signup" >供应商注册入口</a></dt>
          </dl>
        </div>
      </div>
      <div class="footer-copyright clearfix">
        <div class="footer-copyright-left">
          <p>©美团网团购 meituan.com<a href="https://beian.miit.gov.cn/" style="margin-left: 20px;">京ICP证070791号</a><a
              href="https://beian.miit.gov.cn">京ICP备10211739号-1</a></p>
          <p><a href="https://portal-portm.meituan.com/webpc/protocolmanage/comment/license/tv"
              >广播电视节目制作经营许可证（京）字第03889号</a></p>
          <p><a href="https://portal-portm.meituan.com/webpc/protocolmanage/foodlicense" >食品经营许可证</a><a
              href="https://portal-portm.meituan.com/webpc/protocolmanage/medicalcertificate"
              >互联网药品信息服务资格证 (京)-经营性-2017-0014</a></p>
          <p><a href="https://portal-portm.meituan.com/webpc/protocolmanage/medicalequipment"
              >医疗器械网络交易服务第三方平台备案：（京）网械平台备字[2018]第00004号</a></p>
          <p> <a href="https://portal-portm.meituan.com/webpc/protocolmanage/edilicense" >平台EDI许可证</a>
          </p>
        </div>
        <div class="footer-copyright-right"><a
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002002052" ><img
              class="beianicon" src="https://p0.meituan.net/travelcube/d0289dc0a46fc5b15b3363ffa78cf6c719256.png">京公网安备
            11000002002052号</a>
          <div class="footer-copyright-cert"><a class="bus-license"
              href="https://zzlz.gsxt.gov.cn/businessCheck/verifKey.do?showType=p&amp;serial=11000020190617184241000003572274-SAIC_SHOW_10002020190618102726868&amp;signData=MEQCIMo7nivRikGQc6WsX/jx0IcZ46irhkjszdhhg4kv17uBAiD78duadRu3XX5WyuE+duSrhPmdVUFgr7cN1iV/WSv4uw=="
              title="营业执照" ><img
                src="https://p1.meituan.net/travelcube/3e7f8a17e55bace814166b667618b459366061.png@76h_76w_2e">
              <p>北京三快科技有限公司</p>
            </a><a class="sp-ft sp-ft--record"
              href="https://beian.miit.gov.cn/?spm=a21bo.21814703.1997523009.40.5af911d9saMbGy#/Integrated/index"
              title="备案信息" >备案信息</a><a class="sp-ft sp-ft--12315" href="http://www.12315.cn/"
              title="12315消费争议" >12315消费争议</a></div>
        </div>
      </div>
    </div>
  </footer>
  <!-- footer -->

  <script src="./js/alert.js"></script>
  <script src="./js/carts.js"></script>

  <script>
    // 购物车+1
    $('tbody').on('click','.plus-btn',function(){
      let num = Number($(this).prev().val())
      let msg='';
      num++
      let goods_id=$(this).parents('tr').attr('data-id')
      $.post('/api/carts/update.jsp',{token,goods_id,buyNum:num},res=>{
        if(res.meta.state===200){
          // $(this).prev().val(num)
          location.reload()
        }else{
          if(res.meta.msg==='库存不足'){
            msg=`${res.data.goods_name} ${res.meta.msg},剩余库存：${res.data.total_number}`
          }else{
            msg=res.meta.msg
          }
          cocoMessage.error(msg);
        }
      },'json')
    })

    // 购物车-1
    $('tbody').on('click','.minus-btn',function(){
      let num = Number($(this).next().val())
      let msg='';
      num--
      if(num<1){
        cocoMessage.error('至少购买一件商品');
        return
      } 
      let goods_id=$(this).parents('tr').attr('data-id')
      $.post('/api/carts/update.jsp',{token,goods_id,buyNum:num},res=>{
        if(res.meta.state===200){
          // $(this).next().val(num)
          location.reload()
        }else{
          
            msg=res.meta.msg
        }
      },'json')
    })

    //值改变
    $('tbody').on('input','input',function(){
      let num = $(this).val().replace(/\D/g,'')
      $(this).val(num)
    })
    //失焦
    $('tbody').on('blur','input',function(){
      let num = $(this).val()
      if(!num || num<1){num=1}
      let goods_id=$(this).parents('tr').attr('data-id')
      $.post('/api/carts/update.jsp',{token,goods_id,buyNum:num},res=>{
        let msg=''
        if(res.meta.state===200){
          // $(this).prev().val(num)
          setTimeout(()=>{
            location.reload()
          },2000)
        }else{
          if(res.meta.msg==='库存不足'){
            $.post('/api/carts/update.jsp',{token,goods_id,buyNum:res.data.total_number},res=>{
              setTimeout(()=>{
                location.reload()
              },2000)
            },'json')
            msg=`${res.data.goods_name} ${res.meta.msg},剩余库存：${res.data.total_number}`
          }else{
            msg=res.meta.msg
          }
          cocoMessage.error(msg);
        }
      },'json')
    })
  </script>
</body>

</html>